<template>
  <div class="flex-1 h-full">
    <div
      class="echarts"
      style="height: calc(100%)"
      v-loading="loading"
      element-loading-background="transparent"
    >
      <ECharts
        v-if="option"
        :option="option"
        :id="`today-attendance-pie` + props.id"
        ref="chart"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import dayjs from "dayjs";
import request from "@/utils/request";
import { useDictionary } from "@/utils/useTable";
import { useRoute } from "vue-router";
import ECharts from "@/components/ECharts/index.vue";
import * as echarts from "echarts/core";
// import { isDarkMode } from "@/utils/index";
const routeName = useRoute().name;
const emit = defineEmits(["deletePanelItemEvent"]);

function isDarkMode(params: any) {
  return true;
}
const props = defineProps({
  panelSetIcon: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  url: {
    type: String,
    default: () => {
      return "";
    },
  },
  title: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
  second: {
    type: Number,
    default: () => {
      return 1000 * 60 * 10;
    },
  },
});
const { panelSetIcon, id, url, title, second } = toRefs(props);
const radio = ref("1");
const selectOption = [
  {
    label: "重量",
    value: "1",
  },
  {
    label: "数量",
    value: "2",
  },
];

function deletePanelItem() {
  emit("deletePanelItemEvent", id.value);
}

const reportData = ref();

const searchParam = reactive({
  date: dayjs().format("YYYY-MM-DD"),
});

const searchedParam = reactive({
  date: dayjs().format("YYYY-MM-DD"),
});

async function handleSearch() {
  reportData.value = null;
  loading.value = true;
  Object.assign(searchedParam, searchParam);
  const { data } = await request({
    url: `/mes/mesattendancereport/getCurrentDayAttendance`,
    method: "post",
    data: {
      reportDate: searchParam.date,
    },
  }).finally(() => {
    loading.value = false;
  });

  reportData.value = [
    {
      name: "计划出勤",
      value: data.planNumberSum ?? 0,
    },
    {
      name: "实际出勤",
      value: data.actualNumberSum ?? 0,
    },
  ];
  setOptions();

  // setTimeout(() => {
  //   reportData.value = [
  //     {
  //       name: "计划出勤",
  //       value: 100,
  //     },
  //     {
  //       name: "实际出勤",
  //       value: 50,
  //     },
  //   ];
  //   loading.value = false;
  //   setOptions();
  // }, 500);
}
//职称结构图表
const colorList = [
  "#006DFB",
  "#18dcff",
  "#313ca9",
  "#B4EC51",
  "#7d5fff",
  "#FFBC6D",
  "#51D9A2",
  "#f9e264",
  "#f47a75",
  "grey",
  new echarts.graphic.LinearGradient(0, 1, 0, 0, [
    {
      offset: 0,
      color: "#04B9BD",
    },
    {
      offset: 1,
      color: "#76F2F8",
    },
  ]),
  "#765025",
];
const rich: any = {
  name: {
    color: isDarkMode(routeName) ? "#eeeeee" : "#666",
    fontSize: 18,
    fontFamily: "DINAlt",
    // padding: [8, 30, 0, 30],
    align: "left",
  },
  person: {
    color: isDarkMode(routeName) ? "#eeeeee" : "#666",
    fontSize: 14,
    align: "left",
  },
  value: {
    color: "#333",
    fontSize: 16,
    padding: [0, 30, 8, 30],
    fontWeight: "500",
    align: "left",
  },
  percent: {
    color: "#FFF",
    align: "right",
    fontSize: 16,
    fontWeight: "400",
    //padding: [0, 5]
  },
};
const loading = ref(false);
const option = ref();
const chart = ref();
function setOptions() {
  option.value = {
    color: colorList,
    title: {
      show: true,
      text: "",
      top: 15,
      left: "center",
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "rgba(0,0,0,.5)",
      textStyle: {
        color: "#fff",
        fontFamily: "DINLight",
        fontSize: 14,
      },
    },
    series: [
      {
        itemStyle: {
          color: function (params) {
            return colorList[params?.dataIndex];
          },
        },
        type: "pie",
        radius: ["0%", "60%"],
        center: ["50%", "48%"],
        // label: {
        //   show: true,
        //   position: "inner",
        //   formatter: (params: any) => {
        //     return "{percent|" + params.percent.toFixed(0) + "%}";
        //   },
        //   rich: rich,
        // },
        label: {
          show: true,
          position: "outside",
          formatter: "{b}\n{name|{c}} {person|人}",
          color: isDarkMode(routeName) ? "#eeeeee" : "#666",
          fontSize: isDarkMode(routeName) ? 16 : 12,
          lineHeight: 26,
          rich: rich,
        },
        labelLine: {
          length: 20,
          length2: 10,
          lineStyle: {
            width: 1,
          },
        },
        data: reportData.value,
      },
      {
        itemStyle: {
          color: isDarkMode(routeName) ? "" : "#F2F9F7",
          opacity: isDarkMode(routeName) ? "0.3" : "1",
        },
        type: "pie",
        silent: true, // 取消高亮
        radius: ["0%", "65%"],
        center: ["50%", "48%"],
        data: reportData.value,
        label: {
          show: false,
          position: "inner",
          formatter: (params: any) => {
            return "{percent|" + params.percent.toFixed(0) + "%}";
          },
          // rich: rich,
        },
        z: -1,
      },
    ],
  };
}
// 定时刷新
let timer: any = ref(null);

// 大屏切换处理方法
function handleScreenData() {
  clearInterval(timer.value);
  timer.value = null;

  timer.value = setInterval(() => {
    handleSearch();
    // 重复调用组件的重新获取方法
  }, second.value);
}

onMounted(() => {
  handleSearch();
  handleScreenData();
});
onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped></style>
